<template>
  <div>
    <Modal
      v-model="taskModal"
      draggable
      scrollable
      width="800"
      title="创建任务"
      class="taskModalClss"
    >
      <p
        slot="header"
        class="modalHeader"
        style="display: flex; justify-content: space-between"
      >
        <span style="margin-left: 5px">{{ modalName }}任务</span>
      </p>
      <p slot="close" class="modalHeader" @click="taskCancel">
        <CButtonClose slot="close" />
      </p>

      <!-- <Form
        ref="formCustom"
        :model="formData"
        :rules="ruleCustom"
        :label-width="120"
      > -->
        <!-- <div style="display: flex">
          <div class="rowAlign1" style="margin-left: -10px">
            <FormItem label="任务名称：" prop="taskName">
              <Input type="text" v-model="formData.taskName"></Input>
            </FormItem>
            <FormItem label="筛选范围系数:" prop="rangeRatio">
              <Input type="text" v-model="formData.rangeRatio"></Input>
            </FormItem>
            <FormItem label="文件类型:" prop="pendingSuffix">
              <Input type="text" v-model="formData.pendingSuffix"></Input>
            </FormItem>
            <FormItem label="文件完整性标志:" prop="finishFlag">
              <Input type="text" v-model="formData.finishFlag"></Input>
            </FormItem>
            <FormItem label="FTP IP:" prop="ftpHost">
              <Input type="text" v-model="formData.ftpHost"></Input>
            </FormItem>
            <FormItem label="FTP密码:" prop="ftpPassword">
              <Input type="text" v-model="formData.ftpPassword"></Input>
            </FormItem>
            <FormItem label="流程选择:" prop="pendingSuffix">
              <Input type="text" ></Input>
            </FormItem>
          </div>

          <div class="rowAlign">
            <FormItem label="扫描间隔：">
              <Select size="small" v-model="formData.frequence">
                <template v-for="item in cronList">
                  <Option :value="item.value" :key="item.label">{{
                    item.label
                  }}</Option>
                </template>
              </Select>
            </FormItem>
            <FormItem label="扫描延迟天数:" prop="delay">
              <Input type="text" v-model="formData.delay"></Input>
            </FormItem>
            <FormItem label="生产目录:" prop="processDir">
              <Input
                search
                enter-button="..."
                placeholder="请输入生产目录："
                @on-search="openSelectTree"
              />
              <Input type="text" v-model="formData.processDir"></Input>
              <CButton
                color="info"
                class="system-btn-style"
                style="height: 30px; margin-left: 10px"
                @click="openSelectTree({flag:0})"
                >...</CButton
              >
            </FormItem>
            <FormItem label="FTP用户名:" prop="ftpUserName">
              <Input type="text" v-model="formData.ftpUserName"></Input>
            </FormItem>
          </div>
        </div> -->

        <div>
          <div class="top_row">
            <div>
              <label class="labelName">任务名称：</label>
              <Select 
                transfer 
                v-model="taskId" 
                style="width:200px"
                filterable
                @on-change="getTaskId"
                label-in-value
                >
                <Option 
                  v-for="item in taskNameList" 
                  :value="item.value" 
                  :key="item.label">{{ item.label }}</Option>
              </Select>
            </div>
            <div>
              <label class="labelName">扫描间隔：</label>
              <Select 
                transfer 
                v-model="crontabExpress" 
                style="width:200px"
                filterable
                @on-change="getCronList"
                label-in-value
                >
                <Option 
                  v-for="item in cronList" 
                  :value="item.value" 
                  :key="item.label"
                  >{{ item.label }}</Option>
              </Select>
            </div>
          </div>
          <div class="top_row">
            <div>
              <label class="labelName">文件类型：</label>
              <Input v-model="pendingSuffix" style="width:200px"></Input>
            </div>
            <div>
              <label class="labelName">生产目录：</label>
              <Input v-model="processDir" style="width:160px"></Input>
              <CButton
                color="info"
                class="system-btn-style"
                style="height: 30px; margin-left: 5px"
                @click="openSelectTree({flag:0})"
                >...</CButton>
            </div>
          </div>
          <div class="top_row">
            <div>
              <label class="labelName">流程选择：</label>
              <Select 
                transfer 
                v-model="flowId" 
                style="width:200px"
                filterable
                @on-select="processingOnChange"
                >
                <Option
                    v-for="item in processingList"
                    :value="item.id"
                    :key="item.id"
                    >{{
                      item.workflowName + "-" + item.workflowVersion + ".0"
                    }}</Option>
              </Select>
            </div>
          </div>

        </div>

        <Divider></Divider>
      <!-- </Form> -->
      <div>
        <span style="font-size:18px">风险产品扫描目录列表</span>
        <CButton
          color="info"
          class="system-btn-style"
          style="height: 30px; float: right"
          @click="scanPathModal = true"
          >添加扫描目录</CButton
        >
      </div>
      <div style="margin-top: 10px">
        <Table height="200" :columns="columns1" :data="dataList">
          <template slot-scope="{ row, index }" slot="action">
            <CButton
              color="info"
              class="system-btn-style"
              style="height: 30px; margin-left: 10px"
              @click="editScanInfoBtn(row, index)"
              >编辑</CButton
            >
            <CButton
              color="info"
              class="system-btn-style"
              style="height: 30px; margin-left: 10px"
              @click="delScanInfo(row)"
              >删除</CButton
            >
          </template>
        </Table>
      </div>
      <template #footer class="footerBtns">
        <CButton color="info" class="cancel-btn" @click="taskCancel"
          >取消</CButton
        >
        <CButton color="info" class="system-btn-style" @click="taskOk"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="scanPathModal"
      draggable
      scrollable
      title="添加扫描目录"
      style="height: 400px"
    >
      <!-- <p
        slot="header"
        class="modalHeader"
        style="display: flex; justify-content: space-between"
      >
        <span style="margin-left: 5px">添加扫描目录</span>
      </p> -->
      <div style="display: flex;">
        <span style="display: inline-block;font-size: 16px;margin-left: 10px;">扫描目录：</span>
        <Input :value="scanningUrl" placeholder="请选择文件路径..." clearable style="width: 280px;margin: 0px 4px" />
        <Button type="primary" class="system-btn-style" @click="openSelectTree({flag:1})">...</Button>
      </div>
      <div style="display: flex; margin-top: 20px">
        <span style="display: inline-block;font-size: 16px;margin-left: 10px;">归档目录：</span>
        <Input :value="archiveUrl" placeholder="请选择文件路径..." clearable style="width: 280px;margin: 0px 4px" />
        <Button type="primary" class="system-btn-style" @click="openSelectTree({flag:2})">...</Button>
      </div>

      <p slot="close" class="modalHeader" @click="addScanPathCancel">
        <CButtonClose slot="close" />
      </p>
      <template #footer class="footerBtns">
        <CButton color="info" class="cancel-btn" @click="addScanPathCancel"
          >取消</CButton
        >
        <CButton color="info" class="system-btn-style" @click="addScanPathOk"
          >添加</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateScanPathModal"
      draggable
      scrollable
      title="修改目录"
      style="heighe: 400px"
    >
      <!-- <p
        slot="header"
        class="modalHeader"
        style="display: flex; justify-content: space-between"
      >
        <span style="margin-left: 5px">修改扫描目录</span>
      </p> -->
      <!-- <div style="display: flex">
        <span style="width: 120px">卫星名称：</span>
        <Input type="text" v-model="updateScanInfo.satellite"></Input>
      </div>
      <div style="display: flex; margin-top: 20px">
        <span style="width: 120px">扫描目录：</span>
        <Input type="text" v-model="updateScanInfo.dir"></Input>
      </div> -->
      <div style="display: flex;">
        <span style="display: inline-block;font-size: 16px;margin-left: 10px;">扫描目录：</span>
        <Input :value="UpdataScanningUrl" placeholder="请选择文件路径..." clearable style="width: 280px;margin: 0px 4px" />
        <Button type="primary" class="system-btn-style" @click="openSelectTree({flag:3})">...</Button>
      </div>
      <div style="display: flex; margin-top: 20px">
        <span style="display: inline-block;font-size: 16px;margin-left: 10px;">归档目录：</span>
        <Input :value="UpdataArchiveUrl" placeholder="请选择文件路径..." clearable style="width: 280px;margin: 0px 4px" />
        <Button type="primary" class="system-btn-style" @click="openSelectTree({flag:4})">...</Button>
      </div>

      <p slot="close" class="modalHeader" @click="updateScanPathModal = false">
        <CButtonClose slot="close" />
      </p>
      <template #footer class="footerBtns">
        <CButton
          color="info"
          class="cancel-btn"
          @click="updateScanPathModal = false"
          >取消</CButton
        >
        <CButton color="info" class="system-btn-style" @click="updateScanPathOk"
          >添加</CButton
        >
      </template>
    </Modal>

    <FileCatalog
      ref="refFileCatalogModal"
      :modalShow="fileCatalogModal"
      @closed="fileCatalogModalClose"
      @menuOk="fileCatalogModalOk"
    ></FileCatalog>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import FileCatalog from "../../jobProcess/fileCatalog.vue";
export default {
  name: "cycleOptimCommon",
  props: {
    modalShow: {
      type: Boolean,
      default: false,
    },
    modalTitle: {
      type: String,
      default: "创建",
    },
  },
  data() {
    return {
      currentTdIndex: 0,
      updateScanPathModal: false,
      UpdataScanningUrl:{ scanDir: "", archiveDir: ""},
      UpdataArchiveUrl: { scanDir: "", archiveDir: "" },
      // updateScanInfo: { satellite: "xx", dir: "xx" },
      // scanInfo: { satellite: "xx", dir: "xx" },
      scanPathModal: false,
      dataList: [],
      columns1: [
        {
          title: "序号",
          type: "index",
          width: 90,
          align: "center",
        },
        {
          title: "扫描目录",
          key: "scanDir",// satellite scanDir
          align:'center'
        },
        {
          title: "归档目录",
          key: "archiveDir",//dir archiveDir
          align:'center'
        },
        {
          title: "操作",
          slot: "action",
          align:'center'
        },
      ],

      fileCatalogModal: false,
      flag: 0,
      startTimeOptions: {},
      endTimeOptions: {},

      taskTypeList: [],
      cronList: [],
      modalName: "创建",
      taskModal: false,
      taskNameList:[],//任务名称
      taskId:'',//任务Id
      processingList: [],//流程选择
      flowName:"",
      flowId:"",
      taskName: "",
      archiveUrl:"",
      scanningUrl: "",
      pendingSuffix: ".gz;.xz", //文件类型
      processDir: "", //生产目录
      crontabDescribe:"",
      crontabExpress:"",
      // formData: {
      //   taskName: "",
      //   frequence: "0 0 0 1/1 * ? ", //扫描间隔
      //   delay: 2, //延迟天数
      //   rangeRatio: "0.7", //筛选范围系数
      //   ftpHost: "172.17.250.6",
      //   ftpUserName: "user",
      //   ftpPassword: "ndrccwxygb",
      //   pendingSuffix: ".gz;.xz", //文件类型
      //   processDir: "", //生产目录
      //   // finishFlag: ".fin",
      // },

      // ruleCustom: {
      //   taskName: [
      //     { required: true, message: "请输入任务名称", trigger: "blur" },
      //   ],
      //   processDir: [
      //     { required: true, message: "请输入生产目录", trigger: "blur" },
      //   ],
      // },
    };
  },
  watch: {
    modalShow: {
      handler(val) {
        this.taskModal = val;
      },
      immediate: true,
      deep: true,
    },
    modalTitle: {
      handler(val) {
        this.modalName = val;
      },
      deep: true,
      immediate: true,
    },

    // "formData.endTime"() {
    //   const _this = this;
    //   this.startTimeOptions.disabledDate = function (date) {
    //     return date.valueOf() > new Date(_this.formData.endTime);
    //   };
    // },

    // "formData.startTime"() {
    //   const _this = this;
    //   this.endTimeOptions.disabledDate = function (date) {
    //     return date.valueOf() < new Date(_this.formData.startTime);
    //   };
    // },
  },

  mounted() {
    this.getTaskName();
    this.getProcessingData();
  },
  components: { draggable, FileCatalog },
  methods: {
    //获取扫描间隔
    getCronList(val){
      this.crontabExpress = val.value
      this.crontabDescribe = val.label
      console.log(this.crontabExpress,this.crontabDescribe)
    },
    //获取任务Id
    getTaskId(val){
      this.taskName = val.label;
      this.taskId = val.value;
      console.log(this.taskName,this.taskId)
    },
    //获取任务名称
    getTaskName(){
      let path = this.$api.taskManageApi.riskTaskQuery;
      this.http.get(path).then((res) => {
        if(res.data.success && res.data.data){
          res.data.data.forEach((item) => {
            let temp = {
              value:'',
              label:'',
            }
            temp.value = item.id;
            temp.label = item.name
            this.taskNameList.push(temp)
          });
          console.log(this.taskNameList);
        }else{
          this.$Message.error("获取任务名称失败")
        }
      })
    },
    //获取流程选择
    getProcessingData() {
      let path = this.$api.queryDealApi.getProduct;
      this.http.get(path).then((res) => {
        if (res.data.code == 0) {
          this.processingList = res.data.data;
          console.log(this.processingList)
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    processingOnChange(item) {
      console.log(item)
      this.flowId = item.value;
      this.flowName = item.label;
      console.log(this.flowId);
    },
    editScanInfoBtn(row, index) {
      console.log(row)
      this.updateScanPathModal = true;
      this.UpdataScanningUrl= row.scanDir;
      this.UpdataArchiveUrl = row.archiveDir;
      this.currentTdIndex = index;
    },
    delScanInfo(row) {
      console.log(row)
      console.log(this.dataList)
      let data = this.dataList.filter((ele) => {
        return ele.scanDir != row.scanDir;
      });
      this.dataList = data;
    },
    addScanPathOk() {
      let obj = { scanDir: this.scanningUrl, archiveDir: this.archiveUrl };
      if (!this.dataList) this.dataList = [];

      // let arr = this.dataList.filter((ele) => {
      //   return ele.satellite == this.scanInfo.satellite;
      // });
      // if (arr.length > 0) {
      //   this.$Message.info("卫星名称已重复");
      //   return;
      // }
      this.dataList.push(obj);
      this.scanPathModal = false;
      this.scanningUrl = '';
      this.archiveUrl = '';
    },
    updateScanPathOk() {
      // let arr = this.dataList.filter((ele) => {
      //   return ele.satellite == this.updateScanInfo.satellite;
      // });
      // if (arr.length > 0) {
      //   this.$Message.info("卫星名称已重复");
      //   return;
      // }
      this.updateScanPathModal = false;
      this.$set(this.dataList, this.currentTdIndex,{ scanDir: this.UpdataScanningUrl, archiveDir: this.UpdataArchiveUrl 
      });
      // this.updateScanInfo.satellite = "";
      // this.updateScanInfo.dir = "";
    },
    addScanPathCancel() {},
    updateScanPathCancel() {},
    init(data, type) {
      console.log(data)
      this.modalType = type;
      this.cronList = data.cronList;
      console.log(this.cronList);
      if (type === "create") {
        // this.formData = {
        //   taskName: "",
        //   frequence: "0 0 0 1/1 * ? ", //扫描间隔
        //   delay: 2, //延迟天数
        //   rangeRatio: "0.7", //筛选范围系数
        //   ftpHost: "",
        //   ftpUserName: "",
        //   ftpPassword: "",
        //   pendingSuffix: ".gz;.xz", //文件类型
        //   processDir: "", //生产目录
        //   // "finishFlag":".fin",
        // };
      } else {
        let obj = JSON.parse(data.taskParameter);
        console.log(obj);
        this.crontabExpress = data.crontabExpress;
        this.crontabDescribe = data.crontabDescribe;
        this.flowId = parseInt(data.flowId);
        this.flowName = data.flowName;
        this.taskName = data.taskName;
        this.pendingSuffix = obj.pendingSuffix;
        this.processDir = obj.processDir;
        this.dataList = obj.dir;
        this.taskId = parseInt(obj.taskId);
        // this.formData.taskName = data.taskName;
        // this.formData.frequence = data.crontabExpress;
        // this.formData.pendingSuffix = obj.pendingSuffix;
        // // this.formData.finishFlag = obj;
        // this.formData.ftpHost = obj.ftpHost;
        // this.formData.ftpUserName = obj.ftpUserName;
        // this.formData.ftpPassword = obj.ftpPassword;
        // this.formData.processDir = obj.processDir;
        // this.formData.rangeRatio = obj.rangeRatio;
        // this.formData.delay = obj.delay;
        // this.dataList = obj.scanDir;
      }
    },

    // 打开选择树  文件操作
    openSelectTree(val) {
      let that = this;
      this.fileCatalogModal = true;
      this.flag = val.flag
      this.$nextTick(() => {
        that.$refs.refFileCatalogModal.initFileTree(
          { type: { name: "dir" } },
          true
        );
      });
    },
    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },
    fileCatalogModalOk(data) {
      if(this.flag == "0"){
        this.processDir = data;
      }else if(this.flag == "1"){
        this.scanningUrl = data;
      }else if(this.flag == "2"){
        this.archiveUrl = data;
      }else if(this.flag == "3"){
        this.UpdataScanningUrl = data
      }else if(this.flag == "4"){
        this.UpdataArchiveUrl = data
      }
      this.fileCatalogModal = false;
    },

    taskCancel() {
      this.$emit("close", false);
    },
    taskOk() {
      if(this.crontabExpress == ""){
        this.$Message.error('请选择扫描间隔')
        return;
      }
      if(this.processDir == ""){
        this.$Message.error('请选择生产目录')
        return;
      }
      if(this.flowId == ""){
        this.$Message.error('请选择流程')
        return;
      }
      if(this.dataList == ""){
        this.$Message.error('请添加扫描目录')
        return;
      }
      let param = {
        crontabDescribe:this.crontabDescribe,
        crontabExpress:this.crontabExpress,
        flowId:this.flowId,
        flowName:this.flowName,
        taskName:this.taskName,
        sourceId:12,
        taskParameter:{
          pendingSuffix:this.pendingSuffix,
          processDir:this.processDir, 
          dir:this.dataList,
          taskId:this.taskId.toString()
        },
      }
      param.taskParameter = JSON.stringify(param.taskParameter);
      this.$emit("ok",param);
      // this.$refs["formCustom"].validate((valid) => {
      //   if (valid) {
      //     let param = {};
      //     param.sourceId = 10; //1表示周期任务 0表示推送 10标识应急推送
      //     param.taskName = _this.formData.taskName;
      //     param.crontabExpress = _this.formData.frequence;
      //     param.crontabDescribe = _this.cronList.filter((ele) => {
      //       return ele.value == _this.formData.frequence;
      //     })[0].label;
      //     let taskParameter = {};

      //     taskParameter = _this.formData;
      //     taskParameter.scanDir = _this.dataList; //扫描目录列表
      //     param.taskParameter = taskParameter;
      //     param.taskParameter = JSON.stringify(taskParameter);
      //     _this.$emit("ok", param);
      //   } else {
      //     _this.$Message.warning("请完整填写表单");
      //   }
      // });
    },

    // onError() {
    //   this.$Message.info("上传失败!");
    // },
    // onSuccess(response, file, fileList) {},
  },
};
</script>
<style  scoped>
.taskModalClss /deep/.ivu-modal-body {
  height: calc(70vh);
  overflow-y: auto;
}
/deep/.ivu-collapse-header {
  display: flex;
  align-items: center;
}
/deep/ .ivu-form-item {
  margin-bottom: 0;
}
/deep/.ivu-date-picker {
  width: 100%;
}

/* /deep/.outpath .ivu-form-item-content {
  display: flex;
} */
/deep/.selectOp {
  display: flex;
}
.selectOp div {
  width: 100px;
}
/deep/.ivu-form-item-error-tip {
  padding-top: 0;
}

/deep/.rowAlign,
.rowAlign1 {
  /* display: flex; */
  width: 50%;
}
/deep/.rowAlign1 .ivu-form-item-content {
  width: 212px;
  display: flex;
}

/deep/.rowAlign .ivu-form-item-content {
  width: 212px;
  display: flex;
}

.top_row {
  display: flex;
  justify-content: space-between;
  margin: 10px 40px;
}
</style>